<template>
  <div class="w-full h-full" v-loading="loading">
    <markdown-editor
      class="h-full"
      id="editor1"
      :show-editor="true"
      :options="options"
      v-model="content"
    />
  </div>
</template>
<script setup lang="ts">
import { useSystemStore } from '@/stores/system'
import MarkdownEditor from '@/components/editor/MarkdownEditor.vue'
import { useDark } from '@vueuse/core'

const content = ref('初始内容')
const loading = ref(true)
const isDark = useDark()
const systemStore = useSystemStore()
const toolbar = [
  'emoji',
  'headings',
  'bold',
  'italic',
  'strike',
  'link',
  '|',
  'list',
  'ordered-list',
  'check',
  'outdent',
  'indent',
  '|',
  'quote',
  'line',
  'code',
  'inline-code',
  'insert-before',
  'insert-after',
  '|',
  'upload',
  'record',
  'table',
  '|',
  'undo',
  'redo',
  '|',
  'fullscreen',
  'edit-mode',
  {
    name: 'more',
    toolbar: [
      'both',
      'code-theme',
      'content-theme',
      'export',
      'outline',
      'preview'
      // 'devtools',
      // 'info',
      // 'help'
    ]
  }
]
const options: IOptions = {
  minHeight: 300,
  height: systemStore.width >= 992 ? '80%' : '50%',
  placeholder: '请在这里输入',
  toolbar: toolbar,
  counter: {
    enable: true,
    max: 100000
  },
  preview: {
    theme: {
      current: isDark.value ? 'dark' : 'light'
    }
  },
  upload: {
    format(files: File[], responseText: string): string {
      return ''
    },
    linkToImgUrl: ''
  },
  after() {
    loading.value = false
  }
}
</script>

<style scoped lang="scss"></style>
